<script>
  import { onMount } from 'svelte';

  let downloadUrl = '';

  onMount(() => {
    detectPlatform();
  });

  function detectPlatform() {
    const userAgent = navigator.userAgent.toLowerCase();

    const arch = detectSystemArchitecture()

    if (userAgent.includes('win')) {
      // Windows
      downloadUrl = 'https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.exe';
    } else if (userAgent.includes('mac')) {
      // macOS - 检测是否为 Apple Silicon
      // 简化检测：如果不是明确的 Intel Mac，默认为 Apple Silicon
      if (arch !== "Apple Silicon") {
        // Intel Mac
        downloadUrl = 'https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.dmg';
      } else {
        // Apple Silicon (ARM64) - 现在大部分新 Mac 都是 Apple Silicon
        downloadUrl = 'https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B-arm64.dmg';
      }
    } else if (userAgent.includes('linux')) {
      // Linux
      downloadUrl = 'https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.AppImage';
    } else {
      // 默认为 Windows
      downloadUrl = 'https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.exe';
    }
  }

  function detectSystemArchitecture() {
        const architectureInfo = {
        MacApple: "Apple Silicon", // macOs on Apple Silicon M芯片
        MacIntel: "Intel Chip", // macOs on Intel
        WindowsIntel: "Intel", // 32-bit
        WindowsIntelx64: "Intel x64",
        WindowsAMD: "AMD",
        WindowsNVIDIA: "NVIDIA",
        WindowsNVIDIAx64: "NVIDIA x64",
        WindowsAMDx64: "AMD x64",
        Unknown: "Unknown",
        };

        function isWindowsX64() {
        const userAgent = navigator.userAgent.toLowerCase();
        const isWindows = /windows/.test(userAgent);
        const is64bit = /win64|x64|wow64/.test(userAgent);
        return isWindows && is64bit;
        }

        function isWindows32() {
        const userAgent = navigator.userAgent.toLowerCase();
        const isWindows = /windows/.test(userAgent);
        const is32bit = /win32/.test(userAgent);
        return isWindows && is32bit;
        }

        function detectGPU() {
        const canvas = document.createElement("canvas");
        let gl, debugInfo, renderer;
        try {
            gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
            debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
            renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
        } catch (error) {
            return architectureInfo.Unknown;
        }

        if (renderer.includes("Apple M")) {
            return architectureInfo.MacApple;
        } else if (renderer.includes("Intel")) {
            if (isWindowsX64()) {
            return architectureInfo.WindowsIntelx64;
            } else if (isWindows32()) {
            return architectureInfo.WindowsIntel;
            } else {
            return architectureInfo.MacIntel;
            }
        } else if (renderer.includes("NVIDIA")) {
            return isWindowsX64() ? architectureInfo.WindowsNVIDIAx64 : architectureInfo.WindowsNVIDIA;
        } else if (renderer.includes("AMD") || renderer.includes("ATI")) {
            return isWindowsX64() ? architectureInfo.WindowsAMDx64 : architectureInfo.WindowsAMD;
        } else {
            return architectureInfo.Unknown;
        }
        }

        return detectGPU();
    }
</script>

<main class="bg-white">
  <!-- Hero Section -->

  <section
    class="relative h-[100vh] md:h-[76vh] text-white text-center overflow-hidden"
  >
    <!-- 背景图片和动态渐变 -->
    <div class="absolute inset-0">
      <!-- 背景图片 -->
      <img
        src="./images/bg.svg"
        alt="AI Background"
        class="absolute inset-0 w-full h-full object-cover transform"
      />

      <!-- 动态渐变 -->
      <div
        class="absolute inset-0 bg-gradient-to-r from-black via-gray-800 to-black opacity-50"
      >
        <div class="particle" style="top: 20%; left: 80%;"></div>
        <div class="particle" style="top: 50%; left: 70%;"></div>
        <div class="particle" style="top: 80%; left: 20%;"></div>
        <div class="particle" style="top: 30%; left: 60%;"></div>
        <div class="particle" style="top: 60%; left: 3%;"></div>
      </div>
    </div>

    <!-- 内容 -->
    <div
      class="relative z-10 max-w-screen-xl mx-auto px-4 flex flex-col items-center justify-center h-full"
    >
      <div class="absolute top-8 left-4 z-20">
        <a href="/" class="flex items-center">
          <img
            src="./images/logo.png"
            alt="Logo"
            class="h-8 w-auto object-contain bg-white rounded-full border-4 border-white"
          />
          <span class="text-lg md:text-xl font-semibold ml-2"
            >问天AI研究助手</span
          >
        </a>
      </div>
      <h2 class="text-xl md:text-3xl text-gray-100 mb-3 mt-36 md:mt-0">
        问天AI研究助手
      </h2>
      <h1 class="text-4xl md:text-8xl font-bold mb-4">
        以智能驱动
        <span
          class="md:-ml-4 text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-red-400 to-red-300 animate-gradient"
        >
          科研创新
        </span>
      </h1>

      <div
        class="flex flex-wrap items-center gap-4 mt-12 md:mt-24 justify-center md:justify-start pb-32 md:pb-0"
      >
      <!-- 下载 -->
      <div class="relative group w-52">
        <!-- Main Button -->
        <button
          class="flex items-center w-52 justify-center px-6 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
        >
        <!-- NEW 标识 -->
        <div class="hidden md:flex absolute -top-[0px] right-[8px] bg-[#AA231B] text-white text-xs font-bold px-2 py-0.4 rounded-full border-2 border-white shadow-sm animate-pulse">
          NEW
        </div>
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
            />
          </svg>
          <span class="ml-2">问天AI研究助手</span>
        </button>

        <!-- Dropdown Menu -->
        <div
          class="-mt-[60px] absolute left-0 top-full w-full bg-white border border-gray-300 rounded shadow-lg opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-hover:opacity-100 group-hover:scale-y-100"
        >
        <a
            href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.exe"
            class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
          >
            Windows
          </a>
          <a
            href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.dmg"
            class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
          >
            MacOs Intel
          </a>
          <a
            href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B-arm64.dmg"
            class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
          >
            MacOs Apple Silicon
          </a>
          <a
            href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.AppImage"
            class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
          >
            Linux
          </a>
          <div
            role="button"
            tabindex="0"
            class="relative hidden md:block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B] group/mobile cursor-pointer"
          >
            <!-- NEW 标识 -->
            <div class="absolute -top-[0px] right-[0px] bg-[#AA231B] text-white text-xs font-bold px-2 py-0.4 rounded-full border-2 border-white shadow-sm animate-pulse">
              NEW
            </div>
            手机端
            <!-- QR Code Tooltip -->
            <div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 opacity-0 scale-0 group-hover/mobile:opacity-100 group-hover/mobile:scale-100 transition-all duration-300 z-50">
              <!-- Arrow pointing to the menu item -->
              <div class="absolute right-full top-1/2 transform -translate-y-1/2">
                <div class="w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent border-r-white"></div>
              </div>
              <!-- QR Code Container -->
              <div class="bg-white rounded-lg w-[160px] ">
                <img
                  src="./images/download-qrcode.png"
                  alt="手机端二维码"
                  style="vertical-align: middle;"
                  class="w-[160px] h-[160px] object-cover rounded-lg"
                />
                <p class="text-center text-sm text-gray-600 pb-2">扫码下载手机端</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a
        style="display:none"
          href={downloadUrl}
          class="flex items-center justify-center px-8 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B] focus:outline-none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
            />
          </svg>
          <span class="ml-2">问天AI研究助手</span>
        </a>
        <!-- Windows 按钮 -->
        <!-- <a
          href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.exe"
          class="flex items-center justify-center w-52 px-8 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B] focus:outline-none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M2.75 7.189V2.865c0-.102 0-.115.115-.115h8.622c.128 0 .14 0 .14.128V11.5c0 .128 0 .128-.14.128H2.865c-.102 0-.115 0-.115-.116zM7.189 21.25H2.865c-.102 0-.115 0-.115-.116V12.59c0-.128 0-.128.128-.128h8.635c.102 0 .115 0 .115.115v8.57c0 .09 0 .103-.116.103zM21.25 7.189v4.31c0 .116 0 .116-.116.116h-8.557c-.102 0-.128 0-.128-.115V2.865c0-.09 0-.102.115-.102h8.48c.206 0 .206 0 .206.205zm-8.763 9.661v-4.273c0-.09 0-.115.103-.09h8.621c.026 0 0 .09 0 .142v8.518a.06.06 0 0 1-.017.06a.06.06 0 0 1-.06.017H12.54s-.09 0-.077-.09V16.85z"
            />
          </svg>
          <span class="ml-2">Windows下载</span>
        </a> -->

        <!-- macOS 按钮 -->
        <div class="relative group w-52" style="display: none;">
          <!-- Main Button -->
          <button
            class="flex items-center w-52 justify-center px-6 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 26 26"
              class="transition-colors duration-300"
              fill="currentColor"
            >
              <path
                d="M23.934 18.947c-.598 1.324-.884 1.916-1.652 3.086c-1.073 1.634-2.588 3.673-4.461 3.687c-1.666.014-2.096-1.087-4.357-1.069c-2.261.011-2.732 1.089-4.4 1.072c-1.873-.017-3.307-1.854-4.381-3.485c-3.003-4.575-3.32-9.937-1.464-12.79C4.532 7.425 6.61 6.237 8.561 6.237c1.987 0 3.236 1.092 4.879 1.092c1.594 0 2.565-1.095 4.863-1.095c1.738 0 3.576.947 4.889 2.581c-4.296 2.354-3.598 8.49.742 10.132M16.559 4.408c.836-1.073 1.47-2.587 1.24-4.131c-1.364.093-2.959.964-3.891 2.092c-.844 1.027-1.544 2.553-1.271 4.029c1.488.048 3.028-.839 3.922-1.99"
              />
            </svg>
            <span class="ml-2">macOS下载</span>
          </button>

          <!-- Dropdown Menu -->
          <div
            class="-mt-[60px] absolute left-0 top-full w-full bg-white border border-gray-300 rounded shadow-lg opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-hover:opacity-100 group-hover:scale-y-100"
          >
            <a
              href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.dmg"
              class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
            >
              Intel 芯片
            </a>
            <a
              href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B-arm64.dmg"
              class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
            >
              Apple Silicon 芯片
            </a>
          </div>
        </div>

        <a
          style="display: none;"
          href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.AppImage"
          download="Linux installer"
          class="flex items-center w-52 justify-center px-8 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 128 128"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M113.823 104.595c-1.795-1.478-3.629-2.921-5.308-4.525c-1.87-1.785-3.045-3.944-2.789-6.678c.147-1.573-.216-2.926-2.113-3.452c.446-1.154.864-1.928 1.033-2.753c.188-.92.178-1.887.204-2.834c.264-9.96-3.334-18.691-8.663-26.835c-2.454-3.748-5.017-7.429-7.633-11.066c-4.092-5.688-5.559-12.078-5.633-18.981a47.6 47.6 0 0 0-1.081-9.475C80.527 11.956 77.291 7.233 71.422 4.7c-4.497-1.942-9.152-2.327-13.901-1.084c-6.901 1.805-11.074 6.934-10.996 14.088c.074 6.885.417 13.779.922 20.648c.288 3.893-.312 7.252-2.895 10.34c-2.484 2.969-4.706 6.172-6.858 9.397c-1.229 1.844-2.317 3.853-3.077 5.931c-2.07 5.663-3.973 11.373-7.276 16.5c-1.224 1.9-1.363 4.026-.494 6.199c.225.563.363 1.429.089 1.882c-2.354 3.907-5.011 7.345-10.066 8.095c-3.976.591-4.172 1.314-4.051 5.413c.1 3.337.061 6.705-.28 10.021c-.363 3.555.008 4.521 3.442 5.373c7.924 1.968 15.913 3.647 23.492 6.854c3.227 1.365 6.465.891 9.064-1.763c2.713-2.771 6.141-3.855 9.844-3.859c6.285-.005 12.572.298 18.86.369c1.702.02 2.679.653 3.364 2.199c.84 1.893 2.26 3.284 4.445 3.526c4.193.462 8.013-.16 11.19-3.359c3.918-3.948 8.436-7.066 13.615-9.227c1.482-.619 2.878-1.592 4.103-2.648c2.231-1.922 2.113-3.146-.135-5M62.426 24.12c.758-2.601 2.537-4.289 5.243-4.801c2.276-.43 4.203.688 5.639 3.246c1.546 2.758 2.054 5.64.734 8.658c-1.083 2.474-1.591 2.707-4.123 1.868c-.474-.157-.937-.343-1.777-.652c.708-.594 1.154-1.035 1.664-1.382c1.134-.772 1.452-1.858 1.346-3.148c-.139-1.694-1.471-3.194-2.837-3.175c-1.225.017-2.262 1.167-2.4 2.915c-.086 1.089.095 2.199.173 3.589c-3.446-1.023-4.711-3.525-3.662-7.118m-12.75-2.251c1.274-1.928 3.197-2.314 5.101-1.024c2.029 1.376 3.547 5.256 2.763 7.576c-.285.844-1.127 1.5-1.716 2.241l-.604-.374c-.23-1.253-.276-2.585-.757-3.733c-.304-.728-1.257-1.184-1.919-1.762c-.622.739-1.693 1.443-1.757 2.228c-.088 1.084.477 2.28.969 3.331c.311.661 1.001 1.145 1.713 1.916l-1.922 1.51c-3.018-2.7-3.915-8.82-1.871-11.909M87.34 86.075c-.203 2.604-.5 2.713-3.118 3.098c-1.859.272-2.359.756-2.453 2.964a102 102 0 0 0-.012 7.753c.061 1.77-.537 3.158-1.755 4.393c-6.764 6.856-14.845 10.105-24.512 8.926c-4.17-.509-6.896-3.047-9.097-6.639c.98-.363 1.705-.607 2.412-.894c3.122-1.27 3.706-3.955 1.213-6.277c-1.884-1.757-3.986-3.283-6.007-4.892c-1.954-1.555-3.934-3.078-5.891-4.629c-1.668-1.323-2.305-3.028-2.345-5.188c-.094-5.182.972-10.03 3.138-14.747c1.932-4.209 3.429-8.617 5.239-12.885c.935-2.202 1.906-4.455 3.278-6.388c1.319-1.854 2.134-3.669 1.988-5.94c-.084-1.276-.016-2.562-.016-3.843l.707-.352c1.141.985 2.302 1.949 3.423 2.959c4.045 3.646 7.892 3.813 12.319.67c1.888-1.341 3.93-2.47 5.927-3.652c.497-.294 1.092-.423 1.934-.738c2.151 5.066 4.262 10.033 6.375 15c1.072 2.524 1.932 5.167 3.264 7.547c2.671 4.775 4.092 9.813 4.07 15.272c-.012 2.83.137 5.67-.081 8.482"
            ></path>
          </svg>
          <span class="ml-2">Linux下载</span>
        </a>

        <a
          href="https://maliang.quryai.com"
          target="_blank"
          class="flex items-center w-52 justify-center px-8 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            {...$$props}
          >
            <path
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              d="m2.5 19.5l17-17l2 2l-17 17zm.5.5L15 8l1 1L4 21zM5.5 3l-.5.5l.5.5l.5-.5zm6 0l-.5.5l.5.5l.5-.5zm-3 3l-.5.5l.5.5l.5-.5zm12 6l-.5.5l.5.5l.5-.5zm0 5l-.5.5l.5.5l.5-.5z"
            />
          </svg>
          <span class="ml-2">深度长文</span>
        </a>

        <a
          href="https://ds.quryai.com"
          target="_blank"
          class="flex items-center w-52 justify-center px-8 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 1024 1024"
          >
            <path d="M952.5 825.4L716.4 589.3c31-52 49.1-112.5 49.1-177.3 0-191.7-156-347.6-347.6-347.6S70.4 220.3 70.4 412s156 347.6 347.6 347.6c58.1 0 112.7-14.5 160.9-39.7l239.6 239.6 134-134.1zM133.5 412c0-156.8 127.6-284.4 284.4-284.4S702.3 255.2 702.3 412 574.7 696.4 417.9 696.4 133.5 568.8 133.5 412z" fill="#0C0C0C" />
          </svg>
          <span class="ml-2">深度研究</span>
        </a>
        <!-- 移动端显示：直接跳转链接 -->
        <a
          href="https://www.quryai.com/download-app"
          target="_blank"
          class="group flex md:hidden items-center w-52 justify-center px-8 py-4 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B] transform hover:scale-105 transition-all duration-300 shadow-lg relative overflow-hidden"
        >
          <!-- NEW 标识 -->
          <div class="absolute top-0 right-[8px] bg-[#AA231B] text-white text-xs font-bold px-2 py-0.5 rounded-full border-2 border-white shadow-sm animate-pulse">
            NEW
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 1024 1024"
            class="transition-colors duration-300 relative z-10"
            fill="currentColor"
          >
            <path
              d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
            />
          </svg>
          <span class="ml-2 relative z-10">移动端</span>
        </a>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section class="py-32">
    <div class="max-w-screen-xl mx-auto px-4 text-center">
      <h2 class="text-4xl md:text-5xl font-bold mb-4">
        让创新回归科研 · 告别琐碎与重复
      </h2>
      <p class="text-gray-600 mb-24 text-xl">
        我们知道那些费力不讨好的琐碎任务让你倍感压力，问天AI伴你一起轻松应对
      </p>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="space-y-2">
          <div class="flex justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="60"
              height="60"
              viewBox="0 0 24 24"
              ><path
                fill="#666"
                d="M5.017 12.5H8q.14 0 .256.07t.183.21L10 15.867l3.562-7.085q.14-.287.448-.287q.307 0 .448.287l1.86 3.719h2.665q-.183-2.742-2.2-4.621T12 6T7.217 7.879t-2.2 4.621M12 20q2.766 0 4.783-1.879t2.2-4.621H16q-.14 0-.256-.07t-.183-.21L14 10.134l-3.561 7.103q-.141.287-.448.277t-.449-.296L7.682 13.5H5.018q.183 2.742 2.2 4.621T12 20m0 1q-1.658 0-3.113-.626t-2.545-1.716t-1.716-2.546T4 13h1q0 2.9 2.05 4.95T12 20t4.95-2.05T19 13h1q0 1.658-.626 3.113t-1.716 2.545t-2.546 1.716T12 21m-8-8q0-1.658.626-3.113t1.716-2.545t2.546-1.716T12 5q1.454 0 2.812.52t2.492 1.469l1.092-1.093l.708.708l-1.092 1.092q.95 1.135 1.469 2.493T20 13h-1q0-2.9-2.05-4.95T12 6T7.05 8.05T5 13zM9.385 2.5v-1h5.23v1zM12 20q-2.9 0-4.95-2.05T5 13t2.05-4.95T12 6t4.95 2.05T19 13t-2.05 4.95T12 20m0-7"
              /></svg
            >
          </div>
          <h3 class="font-bold text-3xl text-[#AA231B]">省时</h3>
          <p class="text-gray-600 text-lg">
            文献筛选、提纲生成与论文写作，全线提效
          </p>
        </div>
        <div class="space-y-2">
          <div class="flex justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="60"
              height="60"
              viewBox="0 0 24 24"
              ><path
                fill="#666"
                d="M11.25 17.23q-2.579 0-4.414-1.729Q5 13.771 5 11.231V4h13.25q1.14 0 1.945.766Q21 5.53 21 6.654q0 1.179-.794 2.012T18.25 9.5h-.942v1.73q0 2.508-1.769 4.254q-1.768 1.747-4.289 1.747M6 8.5h10.308V5H6zm5.25 7.73q2.114 0 3.585-1.452q1.473-1.453 1.473-3.547V9.5H6v1.73q0 2.114 1.549 3.558t3.701 1.443M17.308 8.5h.942q.74 0 1.245-.538T20 6.654q0-.702-.524-1.178T18.25 5h-.942zM5 20v-1h14v1zm6.154-10.5"
              /></svg
            >
          </div>
          <h3 class="font-bold text-3xl text-[#AA231B]">省力</h3>
          <p class="text-gray-600 text-lg">
            自动化处理繁杂环节，解放双手与大脑负担
          </p>
        </div>
        <div class="space-y-2">
          <div class="flex justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="60"
              height="60"
              viewBox="0 0 24 24"
              ><path
                fill="#666"
                d="M9.517 15.558L12 14.052l2.483 1.506l-.66-2.825l2.196-1.885l-2.886-.256L12 7.942l-1.133 2.65l-2.886.256l2.196 1.885zM12 21.916L9.073 19H5v-4.073L2.085 12L5 9.073V5h4.073L12 2.085L14.927 5H19v4.073L21.916 12L19 14.927V19h-4.073zm0-1.416l2.5-2.5H18v-3.5l2.5-2.5L18 9.5V6h-3.5L12 3.5L9.5 6H6v3.5L3.5 12L6 14.5V18h3.5zm0-8.5"
              /></svg
            >
          </div>
          <h3 class="font-bold text-3xl text-[#AA231B]">提质</h3>
          <p class="text-gray-600 text-lg">
            锁定核心，优化深度与质量，助力学术突破
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="py-32 border-t">
    <div class="max-w-screen-xl mx-auto px-4 text-left">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        <!-- Text Content -->
        <div>
          <h5 class="text-sm font-semibold text-gray-600 mb-2 ml-1">
            更少的时间 · 更大的价值
          </h5>
          <h2 class="text-4xl md:text-5xl font-bold text-black mb-12">
            九大功能全方位助力
            <span class="font-light text-gray-300">—</span>
          </h2>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">阅读</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              快速精准，文献重点轻松掌握，复杂信息直观呈现
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">改写</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              灵活高效，表达风格自由调整，文字焕发全新光彩
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">润色</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              细节完美，语言更流畅自然，让文字更加引人注目
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">续写</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              创意延伸，内容自然衔接流畅，激发更多无限灵感
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">综述</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              高效整合，多源数据一键提取，轻松生成学术综述
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">开题</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              洞察专业，精准推荐选题方向，开题规划清晰高效
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">审稿</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              科学智能，深度优化论文质量，改进建议一键掌握
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">提纲</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              结构清晰，逻辑顺畅一目了然，写作流程全程加速
            </p>
          </div>

          <div class="flex flex-wrap items-center my-8">
            <!-- SVG 和标题 -->
            <h3 class="flex items-center w-full md:w-auto mb-0 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#666"
                  d="M12.003 21q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4T6.337 6.338T4 12t2.338 5.663T12 20m0-2q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18m0-1q2.073 0 3.537-1.463T17 12t-1.463-3.536T12 7T8.464 8.464T7 12t1.464 3.537T12 17"
                />
              </svg>
              <span class="text-lg md:text-xl font-bold ml-2">对话</span>
            </h3>

            <!-- 描述文本 -->
            <p
              class="text-gray-600 text-base md:text-lg w-full md:w-auto md:ml-6"
            >
              灵活定制，AI即时响应需求，科研助手全程陪伴您
            </p>
          </div>
        </div>

        <!-- Image Placeholder -->
        <div
          class="flex items-center justify-center bg-gray-200 border-4 aspect-square shadow-lg hover:scale-1.2"
        >
          <img
            src="./images/screen.webp"
            alt="截图"
            class="w-full h-full object-cover transform hover:scale-110 transition duration-300 ease-in-out hover:border-2"
          />
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="bg-[#491014] text-white text-left py-32">
    <div class="max-w-screen-xl mx-auto px-4">
      <h2 class="text-4xl font-bold mb-2 pl-1">
        <span
          class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-red-400 to-red-300 animate-gradient"
        >
          立即下载
        </span>

        体验前所未有的效率提升
      </h2>
      <p class="text-gray-200 mb-12 text-lg pl-1">
        问天AI研究助手专为高校师生与科研人员设计，可无缝连接不同操作平台
      </p>

      <div
        class="flex flex-wrap items-center gap-4 justify-center md:justify-start"
      >
        <!-- Windows 按钮 -->
        <a
          href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.exe"
          class="flex items-center justify-center w-52 px-8 py-2 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B] focus:outline-none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M2.75 7.189V2.865c0-.102 0-.115.115-.115h8.622c.128 0 .14 0 .14.128V11.5c0 .128 0 .128-.14.128H2.865c-.102 0-.115 0-.115-.116zM7.189 21.25H2.865c-.102 0-.115 0-.115-.116V12.59c0-.128 0-.128.128-.128h8.635c.102 0 .115 0 .115.115v8.57c0 .09 0 .103-.116.103zM21.25 7.189v4.31c0 .116 0 .116-.116.116h-8.557c-.102 0-.128 0-.128-.115V2.865c0-.09 0-.102.115-.102h8.48c.206 0 .206 0 .206.205zm-8.763 9.661v-4.273c0-.09 0-.115.103-.09h8.621c.026 0 0 .09 0 .142v8.518a.06.06 0 0 1-.017.06a.06.06 0 0 1-.06.017H12.54s-.09 0-.077-.09V16.85z"
            />
          </svg>
          <span class="ml-2">Windows</span>
        </a>

        <!-- macOS 按钮 -->
        <div class="relative group w-52">
          <!-- Main Button -->
          <button
            class="flex items-center w-52 justify-center px-6 py-2 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 26 26"
              class="transition-colors duration-300"
              fill="currentColor"
            >
              <path
                d="M23.934 18.947c-.598 1.324-.884 1.916-1.652 3.086c-1.073 1.634-2.588 3.673-4.461 3.687c-1.666.014-2.096-1.087-4.357-1.069c-2.261.011-2.732 1.089-4.4 1.072c-1.873-.017-3.307-1.854-4.381-3.485c-3.003-4.575-3.32-9.937-1.464-12.79C4.532 7.425 6.61 6.237 8.561 6.237c1.987 0 3.236 1.092 4.879 1.092c1.594 0 2.565-1.095 4.863-1.095c1.738 0 3.576.947 4.889 2.581c-4.296 2.354-3.598 8.49.742 10.132M16.559 4.408c.836-1.073 1.47-2.587 1.24-4.131c-1.364.093-2.959.964-3.891 2.092c-.844 1.027-1.544 2.553-1.271 4.029c1.488.048 3.028-.839 3.922-1.99"
              />
            </svg>
            <span class="ml-2">macOS</span>
          </button>

          <!-- Dropdown Menu -->
          <div
            class="-mt-[45px] absolute left-0 top-full w-full bg-white border border-gray-300 rounded shadow-lg opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-hover:opacity-100 group-hover:scale-y-100"
          >
            <a
              href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.dmg"
              class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
            >
              Intel 芯片
            </a>
            <a
              href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B-arm64.dmg"
              class="block px-4 py-2 text-black hover:bg-gray-100 text-center hover:text-[#AA231B]"
            >
              Apple Silicon 芯片
            </a>
          </div>
        </div>

        <!-- linux -->
        <a
          href="https://wc.inoteexpress.com/wentian/%E9%97%AE%E5%A4%A9AI%E7%A0%94%E7%A9%B6%E5%8A%A9%E6%89%8B.AppImage"
          download="Linux installer"
          class="flex items-center w-52 justify-center px-6 py-2 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B]"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 128 128"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M113.823 104.595c-1.795-1.478-3.629-2.921-5.308-4.525c-1.87-1.785-3.045-3.944-2.789-6.678c.147-1.573-.216-2.926-2.113-3.452c.446-1.154.864-1.928 1.033-2.753c.188-.92.178-1.887.204-2.834c.264-9.96-3.334-18.691-8.663-26.835c-2.454-3.748-5.017-7.429-7.633-11.066c-4.092-5.688-5.559-12.078-5.633-18.981a47.6 47.6 0 0 0-1.081-9.475C80.527 11.956 77.291 7.233 71.422 4.7c-4.497-1.942-9.152-2.327-13.901-1.084c-6.901 1.805-11.074 6.934-10.996 14.088c.074 6.885.417 13.779.922 20.648c.288 3.893-.312 7.252-2.895 10.34c-2.484 2.969-4.706 6.172-6.858 9.397c-1.229 1.844-2.317 3.853-3.077 5.931c-2.07 5.663-3.973 11.373-7.276 16.5c-1.224 1.9-1.363 4.026-.494 6.199c.225.563.363 1.429.089 1.882c-2.354 3.907-5.011 7.345-10.066 8.095c-3.976.591-4.172 1.314-4.051 5.413c.1 3.337.061 6.705-.28 10.021c-.363 3.555.008 4.521 3.442 5.373c7.924 1.968 15.913 3.647 23.492 6.854c3.227 1.365 6.465.891 9.064-1.763c2.713-2.771 6.141-3.855 9.844-3.859c6.285-.005 12.572.298 18.86.369c1.702.02 2.679.653 3.364 2.199c.84 1.893 2.26 3.284 4.445 3.526c4.193.462 8.013-.16 11.19-3.359c3.918-3.948 8.436-7.066 13.615-9.227c1.482-.619 2.878-1.592 4.103-2.648c2.231-1.922 2.113-3.146-.135-5M62.426 24.12c.758-2.601 2.537-4.289 5.243-4.801c2.276-.43 4.203.688 5.639 3.246c1.546 2.758 2.054 5.64.734 8.658c-1.083 2.474-1.591 2.707-4.123 1.868c-.474-.157-.937-.343-1.777-.652c.708-.594 1.154-1.035 1.664-1.382c1.134-.772 1.452-1.858 1.346-3.148c-.139-1.694-1.471-3.194-2.837-3.175c-1.225.017-2.262 1.167-2.4 2.915c-.086 1.089.095 2.199.173 3.589c-3.446-1.023-4.711-3.525-3.662-7.118m-12.75-2.251c1.274-1.928 3.197-2.314 5.101-1.024c2.029 1.376 3.547 5.256 2.763 7.576c-.285.844-1.127 1.5-1.716 2.241l-.604-.374c-.23-1.253-.276-2.585-.757-3.733c-.304-.728-1.257-1.184-1.919-1.762c-.622.739-1.693 1.443-1.757 2.228c-.088 1.084.477 2.28.969 3.331c.311.661 1.001 1.145 1.713 1.916l-1.922 1.51c-3.018-2.7-3.915-8.82-1.871-11.909M87.34 86.075c-.203 2.604-.5 2.713-3.118 3.098c-1.859.272-2.359.756-2.453 2.964a102 102 0 0 0-.012 7.753c.061 1.77-.537 3.158-1.755 4.393c-6.764 6.856-14.845 10.105-24.512 8.926c-4.17-.509-6.896-3.047-9.097-6.639c.98-.363 1.705-.607 2.412-.894c3.122-1.27 3.706-3.955 1.213-6.277c-1.884-1.757-3.986-3.283-6.007-4.892c-1.954-1.555-3.934-3.078-5.891-4.629c-1.668-1.323-2.305-3.028-2.345-5.188c-.094-5.182.972-10.03 3.138-14.747c1.932-4.209 3.429-8.617 5.239-12.885c.935-2.202 1.906-4.455 3.278-6.388c1.319-1.854 2.134-3.669 1.988-5.94c-.084-1.276-.016-2.562-.016-3.843l.707-.352c1.141.985 2.302 1.949 3.423 2.959c4.045 3.646 7.892 3.813 12.319.67c1.888-1.341 3.93-2.47 5.927-3.652c.497-.294 1.092-.423 1.934-.738c2.151 5.066 4.262 10.033 6.375 15c1.072 2.524 1.932 5.167 3.264 7.547c2.671 4.775 4.092 9.813 4.07 15.272c-.012 2.83.137 5.67-.081 8.482"
            ></path>
          </svg>
          <span class="ml-2">Linux</span>
        </a>
        <!-- 移动端显示：直接跳转链接 -->
        <a
          href="https://www.quryai.com/download-app"
          target="_blank"
          class="group flex md:hidden items-center w-52 justify-center px-6 py-2 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B] transform hover:scale-105 transition-all duration-300 shadow-lg relative overflow-hidden"
        >
          <!-- NEW 标识 -->
          <div class="absolute top-0 right-[4px] bg-[#AA231B] text-white text-xs font-bold px-2 py-0.5 rounded-full border-2 border-white shadow-sm animate-pulse">
            NEW
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 1024 1024"
            class="transition-colors duration-300 relative z-10"
            fill="currentColor"
          >
            <path
              d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
            />
          </svg>
          <span class="ml-2 relative z-10">移动端</span>
        </a>
        <!-- PC端显示：悬停显示二维码 -->
        <div
          class="hidden md:flex items-center w-52 justify-center px-6 py-2 text-lg font-bold bg-white text-black rounded-full hover:bg-gray-200 hover:text-[#AA231B] relative group/mobile"
        >
          <!-- NEW 标识 -->
          <div class="absolute -top-[0px] right-[6px] bg-[#AA231B] text-white text-xs font-bold px-2 py-0.4 rounded-full border-2 border-white shadow-sm animate-pulse">
            NEW
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 1024 1024"
            class="transition-colors duration-300"
            fill="currentColor"
          >
            <path
              d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
            />
          </svg>
          <span class="ml-2">手机端</span>
          <!-- QR Code Tooltip -->
          <div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 opacity-0 scale-0 group-hover/mobile:opacity-100 group-hover/mobile:scale-100 transition-all duration-300 z-50">
            <!-- Arrow pointing to the menu item -->
            <div class="absolute right-full top-1/2 transform -translate-y-1/2">
              <div class="w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent border-r-white"></div>
            </div>
            <!-- QR Code Container -->
            <div class="bg-white rounded-lg w-[160px] ">
              <img
                src="./images/download-qrcode.png"
                alt="手机端二维码"
                style="vertical-align: middle;"
                class="w-[160px] h-[160px] object-cover rounded-lg"
              />
              <p class="text-center text-sm text-gray-600 pb-2">扫码下载手机端</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<style>
  @keyframes glow-breath {
    0% {
      transform: scale(1);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      box-shadow:
        0 0 30px rgba(255, 255, 255, 0.9),
        0 0 100px rgba(255, 255, 255, 0.7);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      opacity: 0.6;
    }
  }

  .particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    animation: glow-breath 5s ease-in-out infinite;
  }

  /* Variations for size and delay */
  .particle:nth-child(2) {
    width: 25px;
    height: 25px;
    animation-delay: 0.5s;
  }

  .particle:nth-child(2) {
    width: 10px;
    height: 10px;
    animation-delay: 2s;
  }

  .particle:nth-child(2) {
    width: 25px;
    height: 25px;
    animation-delay: 1.5s;
  }

  .particle:nth-child(5) {
    width: 40px;
    height: 40px;
    animation-delay: 2s;
  }

  @keyframes gradient-text {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-text 6s ease infinite;
  }
</style>
